<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>电子产品</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#d {
				width: 700px;
				background: url("img/list_bg.gif");
				background-repeat: no-repeat;
				/*padding-top: 50px;*/
			}
			
			#d ul {
				list-style: none;
			}
			
			#d>ul>li {
				float: left;
			}
			
			#d>ul:after {
				content: '';
				display: block;
				clear: both;
			}
			
			#d>ul {
				border-bottom: 1px dashed grey;
			}
			
			#d>ul>li:nth-of-type(1) {
				margin-top: 50px;
				margin-left: 20px;
				width: 100px;
			}
			
			#d>ul>li:nth-of-type(2) {
				margin-left: 20px;
				width: 150px;
				text-align: center;
			}
			
			#d>ul>li:nth-of-type(3) {
				margin-left: 20px;
				width: 220px;
				text-align: center;
				font-size: 12px;
				line-height: 30px;
			}
			
			#d>ul>li:nth-of-type(4) {
				margin-left: 20px;
				width: 100px;
				text-align: center;
			}
			
			#d>ul>li:nth-of-type(5) {
				margin-left: 20px;
				width: 100px;
				text-align: center;
			}
			
			.c1 {
				margin-top: 50px;
				margin-bottom: 10px;
				font-size: 18px;
			}
		</style>
		<script type="text/javascript">
			function checkall() {
				var all = document.getElementById("all");
				var options = document.getElementsByName("option");
				if(all.checked) {
					for(var i = 0; i < options.length; i++) {
						options[i].checked = true;
					}
				} else {
					for(var i = 0; i < options.length; i++) {
						options[i].checked = false;
					}
				}
			}
			
		</script>
	</head>

	<body>
		<div id="d">
			<ul>
				<li class="c1" id><input type="checkbox" name="name" id="all" onclick="checkall()" /><label for="all"> 全选</label></li>
				<li class="c1">商品图片</li>
				<li class="c1">商品名称/出售者/联系方式</li>
				<li class="c1">价格</li>
			</ul>
			<ul>
				<li><input type="checkbox" name="option" /></li>
				<li><img src="img/list0.jpg" /></li>
				<li>
					<ul>
						<li>杜比环绕，家庭影院必备，超真实享受</li>
						<li>出售者：ling112233</li>
						<li>
							<img src="img/online_pic.gif" />
							<img src="img/list_tool_fav1.gif" />收藏
						</li>
					</ul>
				</li>
				<li>一口价<br/>2833.0</li>
			</ul>
			<ul>
				<li><input type="checkbox" name="option" /></li>
				<li><img src="img/list1.jpg"></li>
				<li ">
					<ul>
						<li>HVNID 9999GT 512MB 256bit极品显卡，不容错过</li>
						<li>出售者：aipiaopiao110</li>
						<li>
							<img src="img/online_pic.gif "/>
							<img src="img/list_tool_fav1.gif "/> 收藏
						</li>
					</ul>
				</li >
				<li>一口价<br/>6464.0</li>
			</ul>
			<ul>
				<li><input type="checkbox" name="option" /></li>
				<li><img src="img/list2.jpg "></li>
				<li >
					<ul>
						<li>精品热卖，高清晰30寸等离子电视</li>
						<li>出售者：阳光的挣扎</li>
						<li>
							<img src="img/online_pic.gif "/>
							<img src="img/list_tool_fav1.gif "/> 收藏
						</li>
					</ul>
				</li>
				<li >一口价<br/>18888.0</li>
			</ul>
			<ul>
				<li ><input type="checkbox" name="option" /></li>
				<li ><img src="img/list3.jpg "></li>
				<li >
					<ul>
						<li>sony家用最新版笔记本电脑</li>
						<li>出售者：疯狂的石头</li>
						<li>
							<img src="img/online_pic.gif "/>
							<img src="img/list_tool_fav1.gif "/> 收藏
						</li>
					</ul>
				</li >
				<li>一口价<br/>5889.0</li>
			</ul>
		</div>
	</body>
</html>